import Router from 'next/router';
import Image from 'next/image';

import cls from 'classnames';
import { Carousel } from 'antd';

import swiper1 from '../public/home/swiper/1.png';
import swiper2 from '../public/home/swiper/2.png';
import swiper3 from '../public/home/swiper/3.png';
import swiper4 from '../public/home/swiper/4.png';
import swiper5 from '../public/home/swiper/5.png';
import swiper6 from '../public/home/swiper/6.png';
import swiper7 from '../public/home/swiper/7.png';
import swiper8 from '../public/home/swiper/8.png';
import swiper9 from '../public/home/swiper/9.png';
import swiper10 from '../public/home/swiper/10.png';
import swiper11 from '../public/home/swiper/11.png';
import swiper12 from '../public/home/swiper/12.png';
import swiper13 from '../public/home/swiper/13.png';


import styles from '../styles/Home.module.css';

interface FeatureInfo {
  title: string;
  desc: string[];
  img: string;
}

const _data = [
  {
    title: '高效沟通',
    desc: [
      '按项目组织信息，更符合研发团队习惯',
      '一事一议，使用频道进行沟通',
      '快速了解同事工作状态，拒绝无效沟通',
      '拒绝闲聊，频道支持只读模式',
      '保护专注力，减少对工作的打断'
    ],
    img: require('../public/home/banner1.png')
  },
  {
    title: '知识沉淀',
    desc: [
      '大量信息组件，大幅减少录入信息的开销',
      '动态获取外部系统数据，保持文档内容最新状态',
      '提供API可控的内容块，和自动化流程结合，保持文档内容最新状态',
      '引用项目内数据，按需组织项目信息',
    ],
    img: require('../public/home/banner2.png')
  },
  {
    title: '合理评估',
    desc: [
      '全流程研发行为收集',
      '提供行为数据分析框架，让分析结果更符合团队情况',
      '匿名互评，拒绝偏见',
    ],
    img: require('../public/home/banner3.png')
  },
  {
    title: '开放共赢',
    desc: [
      '开放源代码',
      '开放第三方应用专区，不限制第三方商业行为',
      '开放底层能力API'],
    img: require('../public/home/banner4.png')
  }
]

const _swiperData = [
  swiper1,
  swiper2,
  swiper3,
  swiper4,
  swiper5,
  swiper6,
  swiper7,
  swiper8,
  swiper9,
  swiper10,
  swiper11,
  swiper12,
  swiper13,
]

export default function Home() {
  const renderTemp = (data: FeatureInfo[]) => {
    return data.map((item, key) => {
      return <div className={styles.wrap} key={key}>
        <div
          className={cls(
            styles.homeBox,
            { [styles.reverse]: !(key % 2) })
          }>
          <div className={styles.homeBoxInfo}>
            <h3>{item.title}</h3>

            <ul>
              {
                item?.desc.map((_t, _i) => <li key={`l_${_i}`}>{_t}</li>)
              }
            </ul>
          </div>

          <div className={styles.homeBoxImg}><Image src={item.img} /></div>
        </div>
      </div>
    })
  }

  const go2 = (type: string) => {
    switch (type) {
      case 'index':
        Router.push('/')
        break
      case 'download':
        Router.push('/download')
        break
      case 'register':
        Router.push('/register')
        break
    }
  }

  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  }

  return (
    <div>
      <main className={styles.main}>
        <div className={styles.container}>
          <div className={styles.slogan}>
            <h2>软件研发效能一站式解决方案</h2>
            <a href="/download"><div className={styles.freeBtn}>下载</div></a>
          </div>
          <div className={styles.homeBg}></div>
        </div>

        {renderTemp(_data)}
      </main>

      <div className={styles.carouselBox}>
        <Carousel afterChange={onChange} autoplay>
          {
            _swiperData.map(
              (item, index) => <div key={`sp_${index}`} className={styles.carousel}><Image src={item} /></div>
            )
          }
        </Carousel>
      </div>
    </div>
  )
}
